<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container" >
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" >
        <el-form-item label="团队" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="团队名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="ID" prop="id">
          <el-input
            v-model="queryParams.id"
            placeholder="账号ID"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="ID" prop="level">
          <el-input
            v-model="queryParams.level"
            placeholder="账号等级"
            @keyup.enter="handleQuery"
          />
        </el-form-item>


        <el-form-item class="search-buttons">
          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="hover" class="data-table">
      <el-table
        v-loading="loading"
        :data="Lists"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        class="data-table__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="序号" width="150" />
        <el-table-column prop="id" label="ID" width="150" />
        <el-table-column prop="account" label="账号" />

        <el-table-column prop="avatar" label="头像" width="150">
          <template #default="{ row }">
            <el-image
              style="width: 50px; height: 50px; border-radius: 50%"
              :src="row.avatar || 'https://xcx.yumeishangmao.com/uploads/8b112625e64da7e7dc69fab1044487e5.png'"
              :preview-src-list="[row.avatar]"
            />
          </template>
        </el-table-column>

        <el-table-column prop="level" label="等级" width="150" />
        <el-table-column prop="register_number" label="注册人数" width="150" />

        <el-table-column prop="ad_number" label="广告商人数" width="150" />
        <el-table-column prop="total_score" label="持有积分" width="150" />

        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" fixed="right" align="left" >
          <template #default="scope">
            <el-button
                  v-hasPerm="['group:level:add']"
                  type="primary"
                  link
                  size="small"
                  icon="plus"
                  @click.stop="look(scope.row.id)"
                >
                  查看团队
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
    </el-card>

    
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "团队",
  inheritAttrs: false,
});

import GroupAPI, { GroupVO } from "@/api/system/group.api";

const queryFormRef = ref();

const loading = ref(false);
const selectIds = ref<number[]>([]);
const queryParams = reactive<any>({});

const Lists = ref<GroupVO[]>();
const total = ref(0);

const look = (Id:string) => {
  window.open(`/member/index#/member/member?levelId=${Id}`, '_blank');
}

// 查询
function handleQuery() {
  console.log(queryParams)
  loading.value = true;
  total.value = 15
  Lists.value =  [
    {
      id:"1",
      register_number: 12,
      avatar:"https://xcx.yumeishangmao.com/uploads/8b112625e64da7e7dc69fab1044487e5.png",
      sort:1,
      createTime:"2023-10-10 10:00:00",
      ad_number:100,
      level:"一级团队",
      account:"zhangsan",
      total_score:100
    },
    {
      id:"2",
      register_number: 22,
      avatar:"https://xcx.yumeishangmao.com/uploads/8b112625e64da7e7dc69fab1044487e5.png",
      sort:2,
      createTime:"2023-10-10 10:00:00",
      ad_number:200,
      level:"一级团队",
      account:"lisi",
      total_score:200
    },
    {
      id:"3",
      register_number: 32,
      avatar:"https://xcx.yumeishangmao.com/uploads/8b112625e64da7e7dc69fab1044487e5.png",
      sort:3,
      createTime:"2023-10-10 10:00:00",
      ad_number:300,
      level:"一级团队",
      account:"wangwu",
      total_score:300
    }
  ]
  loading.value = false;
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

// 处理选中项变化
function handleSelectionChange(selection: any) {
  selectIds.value = selection.map((item: any) => item.id);
}


onMounted(() => {
  handleQuery();
});
</script>
